import { defineComponent, ref } from "vue";
import styles from "./Header.module.less";
import { useStore as useCommonStore } from "@/store/common";
import { useStore as useUserStore } from "@/store/user";
import LIcon from "@/components/public/lIcon/lIcon";
import { UserOutlined } from "@ant-design/icons-vue";
import Navs from "@/components/Navs/Navs";
import { useRouter } from "vue-router";
import { imgPath } from "@/common/utils";
import { Modal } from "ant-design-vue";
export default defineComponent({
  emits: ['toLogin', 'toRegister'],
  setup(porps, { emit }) {
    const router = useRouter();
    const commonStore = useCommonStore();
    const userStore = useUserStore();
    const toLogin = () => {
      emit('toLogin');
    }
    const toRegister = () => {
      emit('toRegister');
    }
    // 退出登陆
    const logout = () => {
      Modal.confirm({
        title: '提示',
        content: '确认退出登陆?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          userStore.logout();
        },
      })
    }
    // 头部公告
    const Notice = () => (
      <div class={styles['notice-box']}>
        <div class={styles.notice}>
          <span class={styles['notice-text']}>
            {/* 全国服务热线<span class={styles.warning}>{commonStore.state.contact_mobile}</span>（投保咨询、报案索赔） */}
          </span>
          {
            userStore.token ? (
              <span class={styles['notice-text']}>
                <span class={styles.warning}>您好,{userStore.user_info.username}</span>
                <span class={styles.line}>|</span>
                <span class={styles.clickable} onClick={() => logout()}>退出</span>
              </span>
            ) : (
              <span class={styles['notice-text']}>
                请
                <span class={[styles.warning, styles.clickable]}>
                  <span onClick={() => { toLogin() }}>登录</span>/<span onClick={() => { toRegister() }}>注册</span>
                </span>
              </span>
            )
          }
        </div>
      </div >
    )
    // logo
    const BannerLogo = () => (
      <div class={styles['banner-logo']}>
        <img class={styles.logo} src={imgPath('/logo.png')} onClick={() => { router.push('/') }} />
        {/* <div class={styles['address-box']}>
          <LIcon type="icon-address" color="@second-color" size="16px" />
          <span class={styles.province}>浙江省</span>
        </div> */}
      </div>
    )

    const userCenterMenu = ref([
      {
        label: '我的保单',
        path: '/userCenter/AccidentList',
      },
      {
        label: '我的收藏',
        path: '/userCenter/MyCollection',
      },
      {
        label: '结算充值',
        path: '/userCenter/PrePaidDepositAccount',
      },
      {
        label: '账户设置',
        path: '/account/usercent',
      },
      {
        label: '特色方案',
        path: '',
      },
    ])

    // 跳转用户中心
    const toUserCenter = (path: string) => {
      if (!path) {
        return;
      }
      router.push(path);
    }

    // 菜单
    const Menu = () => (
      <div class={styles.menu}>
        <BannerLogo />
        <Navs />
        {
          userStore.token && (
            <a-dropdown v-slots={{
              overlay: () => (
                <a-menu>
                  {
                    userCenterMenu.value.map((item: any) => (
                      <a-menu-item onClick={() => { toUserCenter(item.path) }}>
                        <div class={styles.userCenterMenuItem}>
                          {item.label}
                        </div>
                      </a-menu-item>
                    ))
                  }
                </a-menu>
              )
            }}>
              <div class={styles['user-center-btn']} onClick={() => { toUserCenter('/userCenter/index') }}>
                <UserOutlined class={styles.icon} />
                <span>会员中心</span>
              </div>
            </a-dropdown>
          )
        }
      </div>
    )
    return () => (
      <div class={styles.header}>
        <Notice />
        <Menu />
      </div>
    )
  }
})